<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
    <title>示例 - TinySelect 一个灵活的下拉组件</title>
    <script src="../lib/jquery-1.10.2.min.js"></script>
    <script src="../dist/tinyselect.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../dist/tinyselect.min.css"/>
    <link rel="stylesheet" type="text/css" href="misc/css/example.css"/>
    <link rel="stylesheet" href="../lib/bootstrap.min.css"/>
    <link rel="stylesheet" href="misc/css/layout.css"/>
    <script src="misc/js/layout.js"></script>
</head>

<body>
<div class="navbar navbar-default navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <div id="headline" class="brand"></div>
            <div id="header">
                <h1>
                    <span>TinySelect</span>
                    <small>一个灵活的WEB下拉组件</small>
                </h1>
                <div class="items">
                    <div class="top-nav-item">
                        <a href="https://gitee.com/hyjiacan/TinySelect">项目主页</a>
                    </div>
                    <div class="top-nav-item">
                        <a href="../">文档</a>
                    </div>
                    <div class="top-nav-item">
                        <a>示例</a>
                    </div>
                    <div class="top-nav-item">
                        <a href="https://gitee.com/hyjiacan/TinySelect/attach_files">下载</a>
                    </div>
                    <div class="top-nav-item">
                        <a href="https://gitee.com/hyjiacan/TinySelect/issues">问题和建议</a>
                    </div>
                    <script src='https://gitee.com/hyjiacan/TinySelect/star_widget_preview'></script>
                    <script src='https://gitee.com/hyjiacan/TinySelect/fork_widget_preview'></script>
                    <div class="top-nav-item">
                        <a href="http://tongji.baidu.com/web/welcome/ico?s=3b889148d3a97c2e11263168434b1788"
                           target="_blank">访问统计</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="content-proxy">
    <div class="container" id="content">
        <div class="row full-height">
            <div class="col-md-4 full-height">
                <div id="example-list"></div>
            </div>
            <div class="col-md-8">
                <div class="content">
                    <iframe src="" name="iframe"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        var iframe = $('iframe').get(0);

        iframe.onload = function () {
            if($(window).width() < 1200){
                $('#hehe').show();
            } else {
                $('#hehe').hide();
            }
            if ($(window).width() >= 992) {
                return;
            }
            setTimeout(function () {
                $(iframe).height(iframe.contentWindow.document.body.scrollHeight);
            }, 300);
        };

        var handler;
        $(window).resize(function () {
            clearTimeout(handler);
            handler = setTimeout(function () {
                if($(window).width() < 1200){
                    $('#hehe').show();
                } else {
                    $('#hehe').hide();
                }
                $(iframe).height($(window).width() < 992 ? iframe.contentWindow.document.body.scrollHeight : '100%');
            }, 300);
        });

        var examples = tinyselect('#example-list', {
            style: {
                minHeight: '480px'
            },
            mode: 'list',
            item: {
                textField: 'title',
                valueField: 'file',
                visible: 0,
                style: {
                    lineHeight: '36px',
                    cursor: 'pointer'
                }
            },
            group: {
                valueField: 'group',
                unknown: '其它'
            },
            header: {
                render: function (header) {
                this.prepend($('<div id="example-header">')
                    .append($('<h3>').append('示例列表'))
                    .append('<div class="tips">Tips: 这个列表就是TinySelect的列表模式</div><br/>')
                    .append('<div id="hehe">你的浏览器宽度居然小于1200，你是原始人？</div>'));
                },
                filter: {
                    trigger: 'change',
                    delay: 382,
                    placeholder: '在此过滤示例'
                }
            },
            footer: {
                totalTpl: '共%s个示例'
            },
            box: {
                empty: '正在加载...'
            }
        });

        examples.on('select', function (e) {
            window.location.hash = iframe.src = e.data.file;
        });

        $.getJSON('misc/data/layout.json').then(function (items) {
            var hash = window.location.hash.replace('#', '');
            if (!hash || items.every(function (item) {
                    return item.file !== hash;
                })) {
                hash = 'basic-single.html';
            }

            examples.load(items)
                .value(hash, true)
                .header.find('.tinyselect-filter').focus();
        });
    });
</script>
</body>

</html>